<template>
  <view class="shareP">

    <u-navbar :is-back="true" title="分享好友" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view  @click="topModalM" style="padding: 0rem 0.5rem;display: flex;
align-items: center;">
            <view  style="
font-size: 0.75rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >{{}}</view>
            <img style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../style/image/my/bottomArrow.jpg" alt="">
        </view>
      </view>
    </u-navbar>

    <div v-if="topModal==true" class="top-modal"  >
            <div class="top-modal-item" @click="selectItemM(index)"  :style="{ color:selectClassify==index?'#34b887':'' }"  v-for="(item,index) in classifyLists "  :key="index"  >{{item.name}}</div>
    </div>

    <view>
    <u-tabs-swiper
        ref="tabs"
        :list="list"
        active-color="#4dbf92"
        inactive-color=""
        count="count"
        height="80"
        :is-scroll="false"
        :current="current"
        bar-width="80"
        gutter="80"
        @change="tabsChange"
      ></u-tabs-swiper>
    
    </view>


    <view v-show="current==0" class="bill" >
            <view  class="bill-items" v-for="(item,index) in imgLists " :key="index" >
               <view @longpress="logoTimeM"  style="padding: 0.5rem;">
                <img  style="width: 100%;" :src="item.img" alt="">
               </view>
            </view>
    </view>

      <view v-show="current==1">

      <view  class="official" v-for="(item,index) in officialLists " :key="index" >
                <view style=" border-bottom: 1px solid #e8e8e8;
font-size: 0.7rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;">
                    {{item.text}}
                </view>
                <view  class="official-bottom">
                    <view  class="official-bottom-text" >复制文案</view>
                </view>
     </view>

    </view>


      <u-popup v-model="showShareModal" mode="center">
			 <view>
                <img style="width: 16rem;" src="../../style/image/share/aaa.jpg" alt="">

                <view style="" class="modal-bottom" >
                <view class="modal-bottom-left">
                 <u-avatar style="padding:0.1rem"  :src="peopleSrc"></u-avatar>
                    <view style="margin-left: 0.5rem;">
                        <view>王丽丽</view>
                        <view>推荐码:TGFR90</view>
                    </view>
                </view>
                    <img style="width: 3rem;" src="../../style/image/share/QR.jpg" alt="">
                </view>
            </view>

            <view class="threeQ" style="color:white">
                <view style="text-align: center;">
                    <img class="threeQ-img" src="../../style/image/share/weChat.jpg" alt="">
                    <view>微信</view>
                </view>

                 <view style="text-align: center;">
                    <img  class="threeQ-img"  src="../../style/image/share/weChatRind.jpg" alt="">
                    <view>朋友圈</view>
                </view>

                 <view style="text-align: center;">
                    <img class="threeQ-img"  src="../../style/image/share/local.jpg" alt="">
                    <view>保存</view>
                </view>
            </view>

		</u-popup>


  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  value1 = 2;
  options1 = [
    {
      label: "默认排序",
      value: 1,
    },
    {
      label: "距离优先",
      value: 2,
    },
    {
      label: "价格优先",
      value: 3,
    },
  ];

  classifyLists=[
    {
       name:'全部'
    },
    {
       name:'励志'
    },
    {
       name:'早安'
    } 
  ]
  public selectClassify=0
  public selectClassifyName='全部'
  public topModal=false
  public current=0

  public  peopleSrc=''

  public list = [
    {
      name: `海报`,
      count: 5,
    },
    {
      name: "文案",
      ate_count: 5,
    }
  ];

  public imgLists=[
    {
      img:require('../../style/image/share/share1.jpg')
    },
    {
      img:require('../../style/image/share/share2.jpg')
    },
    {
      img:require('../../style/image/share/share1.jpg')
    },
    {
      img:require('../../style/image/share/share2.jpg')
    },{
      img:require('../../style/image/share/share1.jpg')
    },
    {
      img:require('../../style/image/share/share2.jpg')
    }
  ]

  public officialLists =[
    {
        text:'我们始终坚持一分钱一分货，共享充电宝几百有几千也 有，很多朋友会问它们有什么区别？ 产品质量： 价格低的产品为保障盈利会降低材质要求，甚至故意将 易损的部位质量做低，只为让你长期拿货； 系统稳定性： 贴牌品牌，没有自己的技术研发公司，一旦系统遭受恶 意攻击，代理与客户资金都得不到保障； 没有专业售后： 这种公司只为赚代理设备分润，不在乎代理是否会赚钱 一旦出现售后问题各种推卸责任。 选择好的共享充电宝项目，我推荐咻电。'
    },
    {
        text:'我们始终坚持一分钱一分货，共享充电宝几百有几千也 有，很多朋友会问它们有什么区别？ 产品质量： 价格低的产品为保障盈利会降低材质要求，甚至故意将 易损的部位质量做低，只为让你长期拿货； 系统稳定性： 贴牌品牌，没有自己的技术研发公司，一旦系统遭受恶 意攻击，代理与客户资金都得不到保障； 没有专业售后： 这种公司只为赚代理设备分润，不在乎代理是否会赚钱 一旦出现售后问题各种推卸责任。 选择好的共享充电宝项目，我推荐咻电。'
    },
    {
        text:'我们始终坚持一分钱一分货，共享充电宝几百有几千也 有，很多朋友会问它们有什么区别？ 产品质量： 价格低的产品为保障盈利会降低材质要求，甚至故意将 易损的部位质量做低，只为让你长期拿货； 系统稳定性： 贴牌品牌，没有自己的技术研发公司，一旦系统遭受恶 意攻击，代理与客户资金都得不到保障； 没有专业售后： 这种公司只为赚代理设备分润，不在乎代理是否会赚钱 一旦出现售后问题各种推卸责任。 选择好的共享充电宝项目，我推荐咻电。'
    },{
        text:'我们始终坚持一分钱一分货，共享充电宝几百有几千也 有，很多朋友会问它们有什么区别？ 产品质量： 价格低的产品为保障盈利会降低材质要求，甚至故意将 易损的部位质量做低，只为让你长期拿货； 系统稳定性： 贴牌品牌，没有自己的技术研发公司，一旦系统遭受恶 意攻击，代理与客户资金都得不到保障； 没有专业售后： 这种公司只为赚代理设备分润，不在乎代理是否会赚钱 一旦出现售后问题各种推卸责任。 选择好的共享充电宝项目，我推荐咻电。'
    }
  ]
 
  public showShareModal =false
  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

 
  }
   tabsChange(index: any) {
//    document.body.scrollTop = document.documentElement.scrollTop = 0;
    console.log(index);
    this.current = index;
    // this.swiperCurrent = index;
  }

  topModalM(){
    console.log('1231231231')
    // this.topModal=true

    if(this.topModal==true){
    this.topModal=false
    }else if(this.topModal==false){
        this.topModal=true
    }

  }
  selectItemM(index:number){

    this.selectClassify=index

      if(this.topModal==true){
    this.topModal=false
    }else if(this.topModal==false){
        this.topModal=true
    }
  }
   
   logoTimeM(){
    console.log('changan')
    this.showShareModal=true
   }
}
</script>

<style  scoped>

>>>.u-mode-center-box {
  min-width: 55px;
  min-height: 55px;
  display: block;
  position: relative;
background-color: rgba(0, 0, 0, 0);
}

.bill{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.bill-items{
width: 50%;
}

.shareP{
    background-color: #f2f2f2;
}

.official{
 background-color: white;
 margin-bottom: 1rem;
 padding: 0rem 0.5rem;
}

.official-bottom{
padding: 0.5rem 0rem;
text-align: center;
display: flex;
justify-content: center;
}


.official-bottom-text{

background: #FFFFFF;
border: 1px solid #02AF74;
border-radius: 0.2rem;
width: 4rem;
text-align: center;
padding: 0.1rem;
font-size: 0.7rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;
}

.shareModal{
   background: rgba(0, 0, 0, 0.2);
 height: 100vh;
 position: absolute;
 top: 0;
 width: 100%;
}
.modal-bottom-left{
display: flex;

}
.modal-bottom{
background-color: white;
margin-top: -3px;
padding: 0.3rem;
display: flex;
align-items: center;
justify-content: space-between;
}

.threeQ{
    display: flex;
justify-content: space-between;
padding: 1rem;
}
.threeQ-img{
width: 2.5rem;
}

.top-modal{
position: absolute;
background-color: white;
box-shadow: 0rem 5px 5px #999;
width: 6rem;
border-radius: 5px;
right: 1rem;
text-align: center;
z-index: 9;
}
.top-modal-item{
  padding: 0.5rem;
}
</style>